<template>
  <div v-if="friend">
    <el-drawer v-model="dialogConfig.visible" size="600" :show-close="false">
      <div class="dialogMessage">
        <ContentMessage :dialogType="true" :onlyLook="dialogConfig.onlyLook" @closeDialog="dialogConfig.visible = false"/>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import {reactive, onMounted, ref, computed} from 'vue'
import ContentMessage from "../index"
import {useStore} from "vuex"
const store = useStore()
const dialogConfig = reactive({
  visible: false,
  onlyLook: false
})
const friend = computed(() => store.state.conversation.active)
const openDialog = (type = false, row) => {
  store.dispatch("conversation/setActive",{userId: row.to, myId: row.from})
  dialogConfig.onlyLook = type
  dialogConfig.visible = true
}
defineExpose({openDialog})
</script>

<style scoped lang="scss">
::v-deep(.el-drawer__header){
  display: none;
}
.dialogMessage {
  height: calc(100vh - 50px);
}
</style>